<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博沃智慧 - MCP管理</title>
    <script src="./static/vendor/js/tailwindcss-3.4.17.js"></script>
    <link rel="stylesheet" href="./static/vendor/css/font-awesome-6.4.0.all.min.css">
    <style>
        :root {
            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }

        * {
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f8fafc;
        }

        /* 自定义滚动条 */
        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: #f1f5f9;
            border-radius: 3px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 3px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

        /* 侧边栏动画 */
        .sidebar {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .sidebar-collapsed {
            width: 64px !important;
        }
        .sidebar-expanded {
            width: 15% !important;
        }

        /* 文本淡入淡出 */
        .fade-text {
            transition: opacity 0.3s ease-in-out;
        }
        .fade-text.hidden {
            opacity: 0;
            pointer-events: none;
        }

        /* MCP服务卡片 */
        .mcp-card {
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }
        .mcp-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
        }
        .mcp-card.active {
            border-color: #667eea;
            background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
        }

        /* 状态指示器 */
        .status-indicator {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 8px;
        }
        .status-online { background: #10b981; }
        .status-offline { background: #ef4444; }
        .status-connecting { background: #f59e0b; animation: pulse 2s infinite; }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        /* 添加按钮 */
        .add-btn {
            transition: all 0.3s ease;
        }
        .add-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
        }

        /* 模态框 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 1000;
            animation: fadeIn 0.3s ease;
        }

        .modal-content {
            background: white;
            margin: 5% auto;
            padding: 0;
            border-radius: 12px;
            width: 90%;
            max-width: 600px;
            max-height: 80vh;
            overflow-y: auto;
            animation: slideIn 0.3s ease;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes slideIn {
            from { transform: translateY(-50px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        /* 标签页 */
        .tab-button {
            transition: all 0.3s ease;
            position: relative;
        }
        .tab-button::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 0;
            height: 2px;
            background: var(--primary-gradient);
            transition: all 0.3s ease;
            transform: translateX(-50%);
        }
        .tab-button.active::after {
            width: 100%;
        }

        /* 输入框焦点效果 */
        .input-focus {
            transition: all 0.3s ease;
        }
        .input-focus:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        /* 按钮动画 */
        .btn-primary {
            background: var(--primary-gradient);
            transition: all 0.3s ease;
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
        }

        /* 开关组件 */
        .toggle-switch {
            position: relative;
            width: 48px;
            height: 24px;
            background: #d1d5db;
            border-radius: 24px;
            cursor: pointer;
            transition: background 0.3s ease;
        }
        .toggle-switch.active {
            background: #667eea;
        }
        .toggle-switch::after {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            width: 20px;
            height: 20px;
            background: white;
            border-radius: 50%;
            transition: transform 0.3s ease;
        }
        .toggle-switch.active::after {
            transform: translateX(24px);
        }

        /* Toast 提示 */
        .toast {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1001;
            animation: slideInRight 0.3s ease;
        }
        @keyframes slideInRight {
            from { transform: translateX(100%); }
            to { transform: translateX(0); }
        }

        /* 测试结果 */
        .test-result {
            transition: all 0.3s ease;
        }
        .test-result.success {
            background: #f0fdf4;
            border-color: #10b981;
            color: #065f46;
        }
        .test-result.error {
            background: #fef2f2;
            border-color: #ef4444;
            color: #991b1b;
        }
    </style>
</head>
<body class="bg-slate-50">
    <div class="flex h-screen overflow-hidden">
        <!-- 左侧边栏 -->
        <div id="sidebar" class="sidebar sidebar-expanded bg-white shadow-xl border-r border-slate-200 flex flex-col">
            <!-- 应用标题 -->
            <div class="p-6 border-b border-slate-200">
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-lg">
                            <i class="fas fa-brain text-white text-lg"></i>
                        </div>
                        <div class="fade-text">
                            <h1 class="font-bold text-xl bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">博沃智慧</h1>
                            <p class="text-xs text-slate-500">MCP管理</p>
                        </div>
                    </div>
                    <button id="sidebarToggle" class="p-2 rounded-lg hover:bg-slate-100 transition-colors">
                        <i class="fas fa-bars text-slate-600"></i>
                        <i class="fas fa-chevron-left text-slate-600 hidden"></i>
                    </button>
                </div>
            </div>

            <!-- 导航菜单 -->
            <div class="flex-1 overflow-y-auto custom-scrollbar p-4">
                <nav class="space-y-2">
                    <a href="main.html" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-slate-100 transition-colors fade-text">
                        <i class="fas fa-comments text-slate-600"></i>
                        <span class="text-slate-700">对话界面</span>
                    </a>
                    <a href="settings.html" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-slate-100 transition-colors fade-text">
                        <i class="fas fa-cog text-slate-600"></i>
                        <span class="text-slate-700">系统设置</span>
                    </a>
                    <a href="knowledge.html" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-slate-100 transition-colors fade-text">
                        <i class="fas fa-book text-slate-600"></i>
                        <span class="text-slate-700">知识库管理</span>
                    </a>
                    <a href="mcp-management.html" class="flex items-center space-x-3 p-3 rounded-lg bg-indigo-50 text-indigo-700 border border-indigo-200 fade-text">
                        <i class="fas fa-plug text-indigo-600"></i>
                        <span class="font-medium">MCP管理</span>
                    </a>
                </nav>
            </div>

            <!-- 用户信息 -->
            <div class="p-4 border-t border-slate-200">
                <div class="flex items-center space-x-3">
                    <div class="w-12 h-12 rounded-full bg-gradient-to-br from-emerald-400 to-cyan-500 flex items-center justify-center shadow-lg">
                        <i class="fas fa-user text-white text-lg"></i>
                    </div>
                    <div class="fade-text flex-1">
                        <p class="font-semibold text-slate-800">张晓明</p>
                        <p class="text-xs text-slate-500">专业版用户</p>
                    </div>
                    <div class="fade-text">
                        <button class="p-2 rounded-lg hover:bg-slate-100 transition-colors" onclick="window.location.href='main.html'">
                            <i class="fas fa-sign-out-alt text-slate-600"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 主要内容区域 -->
        <div class="flex-1 flex flex-col bg-white">
            <!-- 标题栏 -->
            <div class="bg-white border-b border-slate-200 p-6">
                <div class="flex items-center justify-between">
                    <div>
                        <h1 class="text-2xl font-bold text-slate-800">MCP服务管理</h1>
                        <p class="text-slate-500 mt-1">管理和配置您的Model Context Provider服务</p>
                    </div>
                    <div class="flex items-center space-x-4">
                        <button onclick="showAddMcpModal()" class="add-btn bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition-colors">
                            <i class="fas fa-plus mr-2"></i>添加MCP服务
                        </button>
                        <button class="px-4 py-2 text-slate-600 hover:bg-slate-100 rounded-lg transition-colors">
                            <i class="fas fa-sync-alt mr-2"></i>刷新状态
                        </button>
                    </div>
                </div>
            </div>

            <!-- 统计概览 -->
            <div class="bg-white border-b border-slate-200 p-6">
                <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                    <div class="bg-white rounded-lg border border-slate-200 p-4">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm text-slate-600">总服务数</p>
                                <p class="text-2xl font-bold text-slate-800">5</p>
                            </div>
                            <i class="fas fa-server text-3xl text-blue-500"></i>
                        </div>
                    </div>
                    <div class="bg-white rounded-lg border border-slate-200 p-4">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm text-slate-600">在线服务</p>
                                <p class="text-2xl font-bold text-green-600">3</p>
                            </div>
                            <i class="fas fa-check-circle text-3xl text-green-500"></i>
                        </div>
                    </div>
                    <div class="bg-white rounded-lg border border-slate-200 p-4">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm text-slate-600">离线服务</p>
                                <p class="text-2xl font-bold text-red-600">1</p>
                            </div>
                            <i class="fas fa-times-circle text-3xl text-red-500"></i>
                        </div>
                    </div>
                    <div class="bg-white rounded-lg border border-slate-200 p-4">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm text-slate-600">总调用量</p>
                                <p class="text-2xl font-bold text-slate-800">12.5K</p>
                            </div>
                            <i class="fas fa-chart-line text-3xl text-purple-500"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- MCP服务列表 -->
            <div class="flex-1 overflow-y-auto custom-scrollbar p-6">
                <div class="max-w-6xl mx-auto">
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="mcpServicesList">
                        <!-- MCP服务卡片 1 -->
                        <div class="mcp-card bg-white rounded-xl shadow-sm border border-slate-200 p-6">
                            <div class="flex items-center justify-between mb-4">
                                <div class="flex items-center space-x-3">
                                    <div class="w-12 h-12 rounded-lg bg-blue-100 flex items-center justify-center">
                                        <i class="fas fa-database text-blue-600 text-xl"></i>
                                    </div>
                                    <div>
                                        <h3 class="font-semibold text-slate-800">数据库查询服务</h3>
                                        <p class="text-xs text-slate-500">MySQL Connector</p>
                                    </div>
                                </div>
                                <div class="flex items-center">
                                    <span class="status-indicator status-online"></span>
                                    <span class="text-xs text-green-600">在线</span>
                                </div>
                            </div>
                            <div class="space-y-3">
                                <div class="flex items-center justify-between text-sm">
                                    <span class="text-slate-600">地址:</span>
                                    <span class="text-slate-800">localhost:3306</span>
                                </div>
                                <div class="flex items-center justify-between text-sm">
                                    <span class="text-slate-600">调用量:</span>
                                    <span class="text-slate-800">3,245</span>
                                </div>
                                <div class="flex items-center justify-between text-sm">
                                    <span class="text-slate-600">状态:</span>
                                    <span class="text-green-600">正常运行</span>
                                </div>
                            </div>
                            <div class="flex items-center justify-between mt-4 pt-4 border-t border-slate-200">
                                <div class="flex space-x-2">
                                    <button onclick="testMcpService('database')" class="text-blue-600 hover:text-blue-800 text-sm">
                                        <i class="fas fa-play-circle mr-1"></i>测试
                                    </button>
                                    <button onclick="editMcpService('database')" class="text-slate-600 hover:text-slate-800 text-sm">
                                        <i class="fas fa-edit mr-1"></i>编辑
                                    </button>
                                </div>
                                <div class="toggle-switch active" onclick="toggleSwitch(this)"></div>
                            </div>
                        </div>

                        <!-- MCP服务卡片 2 -->
                        <div class="mcp-card bg-white rounded-xl shadow-sm border border-slate-200 p-6">
                            <div class="flex items-center justify-between mb-4">
                                <div class="flex items-center space-x-3">
                                    <div class="w-12 h-12 rounded-lg bg-green-100 flex items-center justify-center">
                                        <i class="fas fa-file-alt text-green-600 text-xl"></i>
                                    </div>
                                    <div>
                                        <h3 class="font-semibold text-slate-800">文档处理服务</h3>
                                        <p class="text-xs text-slate-500">Document Parser</p>
                                    </div>
                                </div>
                                <div class="flex items-center">
                                    <span class="status-indicator status-online"></span>
                                    <span class="text-xs text-green-600">在线</span>
                                </div>
                            </div>
                            <div class="space-y-3">
                                <div class="flex items-center justify-between text-sm">
                                    <span class="text-slate-600">地址:</span>
                                    <span class="text-slate-800">api.docs.com/v1</span>
                                </div>
                                <div class="flex items-center justify-between text-sm">
                                    <span class="text-slate-600">调用量:</span>
                                    <span class="text-slate-800">2,156</span>
                                </div>
                                <div class="flex items-center justify-between text-sm">
                                    <span class="text-slate-600">状态:</span>
                                    <span class="text-green-600">正常运行</span>
                                </div>
                            </div>
                            <div class="flex items-center justify-between mt-4 pt-4 border-t border-slate-200">
                                <div class="flex space-x-2">
                                    <button onclick="testMcpService('document')" class="text-blue-600 hover:text-blue-800 text-sm">
                                        <i class="fas fa-play-circle mr-1"></i>测试
                                    </button>
                                    <button onclick="editMcpService('document')" class="text-slate-600 hover:text-slate-800 text-sm">
                                        <i class="fas fa-edit mr-1"></i>编辑
                                    </button>
                                </div>
                                <div class="toggle-switch active" onclick="toggleSwitch(this)"></div>
                            </div>
                        </div>

                        <!-- MCP服务卡片 3 -->
                        <div class="mcp-card bg-white rounded-xl shadow-sm border border-slate-200 p-6">
                            <div class="flex items-center justify-between mb-4">
                                <div class="flex items-center space-x-3">
                                    <div class="w-12 h-12 rounded-lg bg-purple-100 flex items-center justify-center">
                                        <i class="fas fa-chart-bar text-purple-600 text-xl"></i>
                                    </div>
                                    <div>
                                        <h3 class="font-semibold text-slate-800">数据分析服务</h3>
                                        <p class="text-xs text-slate-500">Data Analytics</p>
                                    </div>
                                </div>
                                <div class="flex items-center">
                                    <span class="status-indicator status-connecting"></span>
                                    <span class="text-xs text-yellow-600">连接中</span>
                                </div>
                            </div>
                            <div class="space-y-3">
                                <div class="flex items-center justify-between text-sm">
                                    <span class="text-slate-600">地址:</span>
                                    <span class="text-slate-800">analytics.local:8080</span>
                                </div>
                                <div class="flex items-center justify-between text-sm">
                                    <span class="text-slate-600">调用量:</span>
                                    <span class="text-slate-800">892</span>
                                </div>
                                <div class="flex items-center justify-between text-sm">
                                    <span class="text-slate-600">状态:</span>
                                    <span class="text-yellow-600">正在连接</span>
                                </div>
                            </div>
                            <div class="flex items-center justify-between mt-4 pt-4 border-t border-slate-200">
                                <div class="flex space-x-2">
                                    <button onclick="testMcpService('analytics')" class="text-blue-600 hover:text-blue-800 text-sm">
                                        <i class="fas fa-play-circle mr-1"></i>测试
                                    </button>
                                    <button onclick="editMcpService('analytics')" class="text-slate-600 hover:text-slate-800 text-sm">
                                        <i class="fas fa-edit mr-1"></i>编辑
                                    </button>
                                </div>
                                <div class="toggle-switch active" onclick="toggleSwitch(this)"></div>
                            </div>
                        </div>

                        <!-- MCP服务卡片 4 -->
                        <div class="mcp-card bg-white rounded-xl shadow-sm border border-slate-200 p-6">
                            <div class="flex items-center justify-between mb-4">
                                <div class="flex items-center space-x-3">
                                    <div class="w-12 h-12 rounded-lg bg-red-100 flex items-center justify-center">
                                        <i class="fas fa-image text-red-600 text-xl"></i>
                                    </div>
                                    <div>
                                        <h3 class="font-semibold text-slate-800">图像处理服务</h3>
                                        <p class="text-xs text-slate-500">Image Processor</p>
                                    </div>
                                </div>
                                <div class="flex items-center">
                                    <span class="status-indicator status-offline"></span>
                                    <span class="text-xs text-red-600">离线</span>
                                </div>
                            </div>
                            <div class="space-y-3">
                                <div class="flex items-center justify-between text-sm">
                                    <span class="text-slate-600">地址:</span>
                                    <span class="text-slate-800">image.api.com:5000</span>
                                </div>
                                <div class="flex items-center justify-between text-sm">
                                    <span class="text-slate-600">调用量:</span>
                                    <span class="text-slate-800">1,432</span>
                                </div>
                                <div class="flex items-center justify-between text-sm">
                                    <span class="text-slate-600">状态:</span>
                                    <span class="text-red-600">连接失败</span>
                                </div>
                            </div>
                            <div class="flex items-center justify-between mt-4 pt-4 border-t border-slate-200">
                                <div class="flex space-x-2">
                                    <button onclick="testMcpService('image')" class="text-blue-600 hover:text-blue-800 text-sm">
                                        <i class="fas fa-play-circle mr-1"></i>测试
                                    </button>
                                    <button onclick="editMcpService('image')" class="text-slate-600 hover:text-slate-800 text-sm">
                                        <i class="fas fa-edit mr-1"></i>编辑
                                    </button>
                                </div>
                                <div class="toggle-switch" onclick="toggleSwitch(this)"></div>
                            </div>
                        </div>

                        <!-- MCP服务卡片 5 -->
                        <div class="mcp-card bg-white rounded-xl shadow-sm border border-slate-200 p-6">
                            <div class="flex items-center justify-between mb-4">
                                <div class="flex items-center space-x-3">
                                    <div class="w-12 h-12 rounded-lg bg-yellow-100 flex items-center justify-center">
                                        <i class="fas fa-search text-yellow-600 text-xl"></i>
                                    </div>
                                    <div>
                                        <h3 class="font-semibold text-slate-800">搜索引擎服务</h3>
                                        <p class="text-xs text-slate-500">Web Search</p>
                                    </div>
                                </div>
                                <div class="flex items-center">
                                    <span class="status-indicator status-online"></span>
                                    <span class="text-xs text-green-600">在线</span>
                                </div>
                            </div>
                            <div class="space-y-3">
                                <div class="flex items-center justify-between text-sm">
                                    <span class="text-slate-600">地址:</span>
                                    <span class="text-slate-800">search.googleapis.com</span>
                                </div>
                                <div class="flex items-center justify-between text-sm">
                                    <span class="text-slate-600">调用量:</span>
                                    <span class="text-slate-800">4,789</span>
                                </div>
                                <div class="flex items-center justify-between text-sm">
                                    <span class="text-slate-600">状态:</span>
                                    <span class="text-green-600">正常运行</span>
                                </div>
                            </div>
                            <div class="flex items-center justify-between mt-4 pt-4 border-t border-slate-200">
                                <div class="flex space-x-2">
                                    <button onclick="testMcpService('search')" class="text-blue-600 hover:text-blue-800 text-sm">
                                        <i class="fas fa-play-circle mr-1"></i>测试
                                    </button>
                                    <button onclick="editMcpService('search')" class="text-slate-600 hover:text-slate-800 text-sm">
                                        <i class="fas fa-edit mr-1"></i>编辑
                                    </button>
                                </div>
                                <div class="toggle-switch active" onclick="toggleSwitch(this)"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加/编辑MCP服务模态框 -->
    <div id="mcpModal" class="modal">
        <div class="modal-content">
            <div class="bg-white border-b border-slate-200 p-6">
                <div class="flex items-center justify-between">
                    <h2 class="text-xl font-semibold text-slate-800" id="modalTitle">添加MCP服务</h2>
                    <button onclick="closeMcpModal()" class="text-slate-400 hover:text-slate-600">
                        <i class="fas fa-times text-xl"></i>
                    </button>
                </div>
            </div>
            <div class="p-6">
                <form id="mcpForm" class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">服务名称</label>
                        <input type="text" id="serviceName" class="w-full px-4 py-2 border border-slate-300 rounded-lg input-focus outline-none" placeholder="例如：数据库查询服务" required>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">服务类型</label>
                        <select id="serviceType" class="w-full px-4 py-2 border border-slate-300 rounded-lg input-focus outline-none" required>
                            <option value="">请选择服务类型</option>
                            <option value="stdio">标准输入输出[stdio]</option>
                            <option value="sse">服务器发送事件[sse]</option>
                            <option value="streamable-http">可流式传输的HTTP请求[streamable-http]</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">服务地址</label>
                        <input type="text" id="serviceUrl" class="w-full px-4 py-2 border border-slate-300 rounded-lg input-focus outline-none" placeholder="例如：localhost:3306 或 api.example.com" required>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">认证方式</label>
                        <select id="authType" class="w-full px-4 py-2 border border-slate-300 rounded-lg input-focus outline-none">
                            <option value="none">无认证</option>
                            <option value="apikey">API Key</option>
                            <option value="oauth">OAuth 2.0</option>
                            <option value="basic">Basic Auth</option>
                            <option value="bearer">Bearer Token</option>
                        </select>
                    </div>
                    <div id="authFields" class="hidden space-y-3">
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-2">认证信息</label>
                            <input type="text" id="authInfo" class="w-full px-4 py-2 border border-slate-300 rounded-lg input-focus outline-none" placeholder="请输入认证信息">
                        </div>
                    </div>
                    
                    <!-- 授权项 -->
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">授权</label>
                        <div class="space-y-2">
                            <label class="flex items-center space-x-2">
                                <input type="checkbox" id="authRead" class="w-4 h-4 text-blue-600 rounded">
                                <span class="text-sm text-slate-700">读取</span>
                            </label>
                            <label class="flex items-center space-x-2">
                                <input type="checkbox" id="authWrite" class="w-4 h-4 text-blue-600 rounded">
                                <span class="text-sm text-slate-700">写入</span>
                            </label>
                        </div>
                    </div>
                    
                    <!-- 测试连接 -->
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">测试连接</label>
                        <div class="flex items-center space-x-2">
                            <button type="button" onclick="testConnection()" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                                <i class="fas fa-plug mr-2"></i>测试连接
                            </button>
                            <div id="testResult" class="text-sm text-slate-600">
                                <!-- 测试结果将在这里显示 -->
                            </div>
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">描述</label>
                        <textarea id="serviceDescription" rows="3" class="w-full px-4 py-2 border border-slate-300 rounded-lg input-focus outline-none resize-none" placeholder="描述该服务的功能和用途..."></textarea>
                    </div>
                    <div class="flex items-center justify-between">
                        <label class="flex items-center space-x-2">
                            <input type="checkbox" id="enableService" class="w-4 h-4 text-blue-600 rounded">
                            <span class="text-sm text-slate-700">启用服务</span>
                        </label>
                    </div>
                </form>
            </div>
            <div class="bg-slate-50 px-6 py-4 flex justify-end space-x-3">
                <button onclick="closeMcpModal()" class="px-4 py-2 text-slate-600 hover:bg-slate-100 rounded-lg transition-colors">
                    取消
                </button>
                <button onclick="saveMcpService()" class="btn-primary px-6 py-2 text-white rounded-lg font-medium">
                    <i class="fas fa-save mr-2"></i>保存
                </button>
            </div>
        </div>
    </div>

    <!-- 测试结果模态框 -->
    <div id="testModal" class="modal">
        <div class="modal-content">
            <div class="bg-white border-b border-slate-200 p-6">
                <div class="flex items-center justify-between">
                    <h2 class="text-xl font-semibold text-slate-800">服务测试结果</h2>
                    <button onclick="closeTestModal()" class="text-slate-400 hover:text-slate-600">
                        <i class="fas fa-times text-xl"></i>
                    </button>
                </div>
            </div>
            <div class="p-6">
                <div id="testResults" class="space-y-4">
                    <!-- 测试结果将在这里显示 -->
                </div>
            </div>
            <div class="bg-slate-50 px-6 py-4 flex justify-end">
                <button onclick="closeTestModal()" class="px-4 py-2 text-slate-600 hover:bg-slate-100 rounded-lg transition-colors">
                    关闭
                </button>
            </div>
        </div>
    </div>

    <script>
        // 侧边栏折叠功能
        const sidebar = document.getElementById('sidebar');
        const sidebarToggle = document.getElementById('sidebarToggle');
        const fadeTexts = document.querySelectorAll('.fade-text');

        sidebarToggle.addEventListener('click', () => {
            const isCollapsed = sidebar.classList.contains('sidebar-collapsed');
            const barsIcon = sidebarToggle.querySelector('.fa-bars');
            const chevronIcon = sidebarToggle.querySelector('.fa-chevron-left');
            
            sidebar.classList.toggle('sidebar-collapsed');
            sidebar.classList.toggle('sidebar-expanded');
            
            // 切换图标显示
            if (isCollapsed) {
                barsIcon.classList.remove('hidden');
                chevronIcon.classList.add('hidden');
            } else {
                barsIcon.classList.add('hidden');
                chevronIcon.classList.remove('hidden');
            }
            
            setTimeout(() => {
                fadeTexts.forEach(text => {
                    if (sidebar.classList.contains('sidebar-collapsed')) {
                        text.classList.add('hidden');
                    } else {
                        text.classList.remove('hidden');
                    }
                });
            }, isCollapsed ? 0 : 200);
        });

        // 认证方式切换
        document.getElementById('authType').addEventListener('change', function() {
            const authFields = document.getElementById('authFields');
            if (this.value === 'none') {
                authFields.classList.add('hidden');
            } else {
                authFields.classList.remove('hidden');
            }
        });

        // 显示添加MCP服务模态框
        function showAddMcpModal() {
            document.getElementById('modalTitle').textContent = '添加MCP服务';
            document.getElementById('mcpForm').reset();
            document.getElementById('authFields').classList.add('hidden');
            // 重置测试结果
            document.getElementById('testResult').innerHTML = '<!-- 测试结果将在这里显示 -->';
            document.getElementById('mcpModal').style.display = 'block';
        }

        // 关闭MCP服务模态框
        function closeMcpModal() {
            document.getElementById('mcpModal').style.display = 'none';
            // 重置测试结果
            document.getElementById('testResult').innerHTML = '<!-- 测试结果将在这里显示 -->';
        }

        // 测试连接功能
        function testConnection() {
            const serviceType = document.getElementById('serviceType').value;
            const serviceUrl = document.getElementById('serviceUrl').value;
            const testResult = document.getElementById('testResult');
            
            if (!serviceType || !serviceUrl) {
                testResult.innerHTML = '<span class="text-red-600">请先填写服务类型和地址</span>';
                return;
            }
            
            testResult.innerHTML = '<span class="text-blue-600"><i class="fas fa-spinner fa-spin mr-1"></i>正在测试连接...</span>';
            
            // 模拟测试连接
            setTimeout(() => {
                const isSuccess = Math.random() > 0.3; // 70%成功率
                
                if (isSuccess) {
                    testResult.innerHTML = '<span class="text-green-600"><i class="fas fa-check-circle mr-1"></i>连接成功</span>';
                    showToast('连接测试成功！', 'success');
                } else {
                    testResult.innerHTML = '<span class="text-red-600"><i class="fas fa-times-circle mr-1"></i>连接失败</span>';
                    showToast('连接测试失败，请检查配置', 'error');
                }
            }, 1500);
        }

        // 保存MCP服务
        function saveMcpService() {
            const serviceName = document.getElementById('serviceName').value;
            const serviceType = document.getElementById('serviceType').value;
            const serviceUrl = document.getElementById('serviceUrl').value;
            const authType = document.getElementById('authType').value;
            const authInfo = document.getElementById('authInfo').value;
            const authRead = document.getElementById('authRead').checked;
            const authWrite = document.getElementById('authWrite').checked;
            const serviceDescription = document.getElementById('serviceDescription').value;
            const enableService = document.getElementById('enableService').checked;

            if (!serviceName || !serviceType || !serviceUrl) {
                showToast('请填写所有必填字段', 'error');
                return;
            }

            // 验证授权设置
            if (!authRead && !authWrite) {
                showToast('请至少选择一个授权权限', 'error');
                return;
            }

            // 模拟保存
            showToast('MCP服务保存成功！', 'success');
            closeMcpModal();
            
            // 这里可以添加实际的保存逻辑
            console.log('保存MCP服务:', {
                name: serviceName,
                type: serviceType,
                url: serviceUrl,
                auth: {
                    type: authType,
                    info: authInfo,
                    permissions: {
                        read: authRead,
                        write: authWrite
                    }
                },
                description: serviceDescription,
                enabled: enableService
            });
        }

        // 测试MCP服务
        function testMcpService(serviceId) {
            const testModal = document.getElementById('testModal');
            const testResults = document.getElementById('testResults');
            
            testModal.style.display = 'block';
            testResults.innerHTML = `
                <div class="text-center">
                    <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
                    <p class="mt-2 text-slate-600">正在测试服务连接...</p>
                </div>
            `;

            // 模拟测试过程
            setTimeout(() => {
                const isSuccess = Math.random() > 0.3; // 70%成功率
                
                if (isSuccess) {
                    testResults.innerHTML = `
                        <div class="test-result success p-4 rounded-lg border">
                            <div class="flex items-center space-x-3">
                                <i class="fas fa-check-circle text-green-600 text-xl"></i>
                                <div>
                                    <h4 class="font-semibold text-green-800">连接成功</h4>
                                    <p class="text-sm text-green-600">服务响应正常，延迟: ${Math.floor(Math.random() * 100 + 50)}ms</p>
                                </div>
                            </div>
                        </div>
                        <div class="space-y-2">
                            <div class="flex justify-between text-sm">
                                <span class="text-slate-600">连接状态:</span>
                                <span class="text-green-600">已连接</span>
                            </div>
                            <div class="flex justify-between text-sm">
                                <span class="text-slate-600">响应时间:</span>
                                <span class="text-slate-800">${Math.floor(Math.random() * 100 + 50)}ms</span>
                            </div>
                            <div class="flex justify-between text-sm">
                                <span class="text-slate-600">服务版本:</span>
                                <span class="text-slate-800">v${Math.floor(Math.random() * 3 + 1)}.${Math.floor(Math.random() * 10)}.${Math.floor(Math.random() * 10)}</span>
                            </div>
                            <div class="flex justify-between text-sm">
                                <span class="text-slate-600">最后检查:</span>
                                <span class="text-slate-800">${new Date().toLocaleTimeString()}</span>
                            </div>
                        </div>
                    `;
                } else {
                    testResults.innerHTML = `
                        <div class="test-result error p-4 rounded-lg border">
                            <div class="flex items-center space-x-3">
                                <i class="fas fa-times-circle text-red-600 text-xl"></i>
                                <div>
                                    <h4 class="font-semibold text-red-800">连接失败</h4>
                                    <p class="text-sm text-red-600">无法连接到服务，请检查服务地址和网络连接</p>
                                </div>
                            </div>
                        </div>
                        <div class="space-y-2">
                            <div class="flex justify-between text-sm">
                                <span class="text-slate-600">错误类型:</span>
                                <span class="text-red-600">Connection Timeout</span>
                            </div>
                            <div class="flex justify-between text-sm">
                                <span class="text-slate-600">错误代码:</span>
                                <span class="text-slate-800">ETIMEDOUT</span>
                            </div>
                            <div class="flex justify-between text-sm">
                                <span class="text-slate-600">建议操作:</span>
                                <span class="text-slate-800">检查服务是否启动</span>
                            </div>
                        </div>
                    `;
                }
            }, 2000);
        }

        // 关闭测试模态框
        function closeTestModal() {
            document.getElementById('testModal').style.display = 'none';
        }

        // 编辑MCP服务
        function editMcpService(serviceId) {
            document.getElementById('modalTitle').textContent = '编辑MCP服务';
            
            // 模拟填充现有服务信息
            const serviceData = {
                name: '数据库查询服务',
                type: 'stdio',
                url: 'localhost:3306',
                authType: 'none',
                authInfo: '',
                authRead: true,
                authWrite: true,
                description: 'MySQL数据库连接服务，提供数据查询和管理功能',
                enabled: true
            };
            
            // 填充表单
            document.getElementById('serviceName').value = serviceData.name;
            document.getElementById('serviceType').value = serviceData.type;
            document.getElementById('serviceUrl').value = serviceData.url;
            document.getElementById('authType').value = serviceData.authType;
            document.getElementById('authInfo').value = serviceData.authInfo;
            document.getElementById('authRead').checked = serviceData.authRead;
            document.getElementById('authWrite').checked = serviceData.authWrite;
            document.getElementById('serviceDescription').value = serviceData.description;
            document.getElementById('enableService').checked = serviceData.enabled;
            
            // 显示认证字段（如果需要）
            if (serviceData.authType !== 'none') {
                document.getElementById('authFields').classList.remove('hidden');
            }
            
            document.getElementById('mcpModal').style.display = 'block';
        }

        // 开关切换
        function toggleSwitch(element) {
            element.classList.toggle('active');
            const isEnabled = element.classList.contains('active');
            showToast(isEnabled ? '服务已启用' : '服务已禁用', 'info');
        }

        // Toast 提示
        function showToast(message, type = 'info') {
            const toast = document.createElement('div');
            toast.className = `toast p-4 rounded-lg shadow-lg ${
                type === 'success' ? 'bg-green-500 text-white' :
                type === 'error' ? 'bg-red-500 text-white' :
                'bg-blue-500 text-white'
            }`;
            toast.innerHTML = `
                <div class="flex items-center space-x-2">
                    <i class="fas ${
                        type === 'success' ? 'fa-check-circle' :
                        type === 'error' ? 'fa-exclamation-circle' :
                        'fa-info-circle'
                    }"></i>
                    <span>${message}</span>
                </div>
            `;
            
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.remove();
            }, 3000);
        }

        // 点击模态框外部关闭
        window.addEventListener('click', function(e) {
            if (e.target.classList.contains('modal')) {
                e.target.style.display = 'none';
            }
        });

        // 页面加载完成后的初始化
        window.addEventListener('load', () => {
            console.log('MCP管理页面加载完成');
            // 这里可以添加页面初始化逻辑
        });
    </script>
</body>
</html>